<template>
    <el-select
        v-model="selectedVal"
        :clearable="clearable"
        class="filter-item"
        :collapse-tags="multiple"
        :multiple="multiple"
        filterable
        :placeholder="'选择' + (multiple ? ', 可多选' : '')"
        :style="multiple ? 'width: 220px;' : 'width: 150px;'">
        <el-option label="请选择" value="" v-if="form"></el-option>
        <el-option
            v-for="(item, index) in data"
            :key="index"
            :label="item.label"
            :value="item.value">
        </el-option>
    </el-select>
</template>

<script>
export default {
    props: {
        value: {
            type: [String, Number, Array],
        },
        data: {
            type: [Array],
        },
        // 多选
        multiple: {
            type: Boolean,
            default: false,
        },
        clearable: {
            type: Boolean,
            default: true,
        },
        form: {
            type: Boolean,
            default: false,
        },
    },
    data () {
        return {
            selectedVal: '',
        };
    },
    computed: {

    },
    watch: {
        value() {
            this.syncForm();
        },
        selectedVal() {
            this.$emit('input', this.selectedVal);
        }
    },
    methods: {
        syncForm() {
            this.selectedVal = this.value;
        },
    },
    created() {
        this.syncForm();
    }
}
</script>

<style scoped>

</style>
